<template>
  <div style="background">
    <div class="head"></div>
    <div class="container">
      <div class="title-container">
        <div
          style="
            width: 100%;
            text-align: center;
            margin-bottom: 20px;
            height: 70px;
          "
        >
          <el-image
            style="height: 100%"
            :src="require('../assets/img/Model Library.png')"
            fit="contain"
          />
        </div>
        <div class="search-container">
          <div class="model_research">
            <input
              type="text"
              autocomplete="false"
              placeholder="Search models"
              class="model_research_input"
              v-model="input"
              style="font-size: 16px"
            />

            <el-button
              type="primary"
              style="border-left: none;border-top-left-radius: 0px;border-bottom-left-radius: 0px; border-color: #ffffff;background-color: #049f40;font-size: 16px;height: 40px;}"
            >
              <font-awesome-icon
                icon="magnifying-glass"
                style="margin-right: 5px"
              />
              Search</el-button
            >
          </div>
          <el-button
            type="primary"
            style="
              margin-left: 10px;
              background-color: #049f40;
              border-color: #049f40;
              font-size: 16px;
              height: 40px;
            "
            @click="
              modelListShower = false;
              importModelsShower = true;
            "
          >
            <font-awesome-icon
              icon="cloud-arrow-up"
              style="margin-right: 5px"
            />
            Import</el-button
          >
          <el-button
            type="primary"
            style="
              margin-left: 10px;
              background-color: #049f40;
              border-color: #049f40;
              font-size: 16px;
              height: 40px;
            "
            @click="
              modelListShower = false;
              showUpdateShower = true;
            "
          >
            <font-awesome-icon icon="pen-to-square" style="margin-right: 5px" />
            Update</el-button
          >
        </div>
      </div>
      <div class="model-cards">
        <div
          class="displayCard"
          :key="index"
          v-for="(item, index) in models"
          v-show="modelListShower"
        >
          <div class="title">
            <font-awesome-icon :icon="['fas', 'cube']" />
            <p style="white-space: nowrap">{{ item.name }}</p>
          </div>
          <div class="content">
            <h2>
              About
              <div class="border"></div>
            </h2>
            <div class="about-txt">
              <p>
                {{ item.desc }}
              </p>
            </div>
            <h2>
              Classification
              <div class="border"></div>
            </h2>
            <div class="classification">
              <el-button
                :key="index"
                type="success"
                size="small"
                v-for="(item1, index) in item.classification"
                >{{ item1 }}</el-button
              >
            </div>

            <h2 style="margin-top: 5px">
              Contact
              <div class="border"></div>
            </h2>
            <div class="s-m">
              <div class="contact-info">
                <font-awesome-icon icon="user-tie" />
                <div class="contactname">{{ item.developer }}</div>
              </div>
              <div class="contact-info" style="justify-content: space-between">
                <div
                  style="
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                  "
                >
                  <font-awesome-icon :icon="['fas', 'envelope']" />
                  <div class="contactname">{{ item.email }}</div>
                </div>
                <div>
                  <font-awesome-icon
                    style="
                      color: #049f40;
                      font-weight: bold;
                      font-size: larger;
                      margin-right: 8px;
                    "
                    icon="trash-can"
                    @click="deleteScene(item.id)"
                  />
                  <font-awesome-icon
                    style="color: #049f40; font-weight: bold; font-size: larger"
                    icon="arrow-right"
                    @click="goModeling(item.id)"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          v-show="importModelsShower"
          v-loading="loading"
          element-loading-text="Loading..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          class="import-models custom-loading-svg"
        >
          <h3>Import Models</h3>
          <el-form
            ref="modelServerInfoRef"
            :model="modelServerInfo"
            :rules="rules"
            label-width="110px"
            class="demo-ruleForm"
            status-icon
          >
            <el-form-item label="IP" prop="ip">
              <el-input
                v-model="modelServerInfo.ip"
                placeholder="Please server ip"
              />
            </el-form-item>

            <el-form-item label="Developer" prop="developer">
              <el-input
                v-model="modelServerInfo.developer"
                placeholder="Please input developer name"
              />
            </el-form-item>

            <el-form-item label="Email" prop="email">
              <el-input
                v-model="modelServerInfo.email"
                placeholder="Please input email"
              />
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                @click="importModels(modelServerInfo)"
                style="background-color: #049f40; border-color: #049f40"
              >
                Import
              </el-button>
              <el-button
                @click="
                  modelListShower = true;
                  importModelsShower = false;
                  importNewModelsShower = false;
                "
                >Cancel</el-button
              >
            </el-form-item>
          </el-form>

          <div class="import-list" v-show="importNewModelsShower">
            <el-divider style="margin: 5px 0px"></el-divider>
            <div class="title">
              <span>Name</span>
              <el-divider direction="vertical"></el-divider>
              <span>Developer</span>
            </div>
            <div class="importModelList">
              <div
                class="item"
                :key="index"
                v-for="(item, index) in importNewModels"
              >
                <span style="margin-right: 5px">.</span>
                <span style="margin-right: 15px">{{ item.name }}</span>

                <span>{{ item.developer }}</span>
              </div>
            </div>
          </div>
        </div>
        <div
          v-show="showUpdateShower"
          v-loading="uploadloading"
          class="update-libirary"
        >
          <h3>Update Library</h3>
          <el-form
            ref="modelServerInfoRef"
            :model="modelServerInfo"
            :rules="rules"
            label-width="45px"
            class="demo-ruleForm"
            status-icon
          >
            <el-form-item label="IP" prop="ip">
              <el-input
                v-model="modelServerInfo.ip"
                placeholder="Please server ip"
              />
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                @click="updateLibrary(modelServerInfo)"
                style="background-color: #049f40; border-color: #049f40"
              >
                Update
              </el-button>
              <el-button
                @click="
                  showUpdateShower = false;
                  modelListShower = true;
                "
                >Cancel</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="redirect">
        <el-button
          type="success"
          style="
            background-color: transparent;
            border-color: transparent;
            font-size: 16px;
            height: 40px;
          "
          @click="goScenes"
        >
          Scenes<font-awesome-icon
            icon="right-from-bracket"
            style="margin-left: 5px"
        /></el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
import axios from "axios";
import { config } from "../components/ModelingComponents/Config.js";

export default {
  data() {
    return {
      importModelsShower: false,
      modelListShower: true,
      modelServerInfoRef: ref(null),
      modelServerInfo: ref({
        ip: "http://172.21.212.124:8000/",
        developer: "Yuanqing He",
        email: "heyuanqing007@163.com",
      }), //模型服务容器信息
      rules: ref({
        ip: [
          {
            required: true,
            message: "Please input server's ip",
            trigger: "blur",
          },
          {
            type: "url",
            message: "Please enter the correct URL address",
            trigger: "blur",
          },
        ],
        developer: [
          {
            required: true,
            message: "Please input developer name",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "Please input Email",
            trigger: "blur",
          },
          {
            type: "email",
            message: "Please enter the correct email address",
            trigger: "blur",
          },
        ],
      }),
      models: [
        {
          name: "CREST",
          classification: ["Hydrology", "Soil"],
          desc: "The Coupled Routing and Excess STorage model (CREST) is a distributed hydrological model developed to simulate the spatial and temporal variation of land surface, and subsurface water fluxes and storages by cell-to-cell simulation.",
          developer: "Wentao Li",
          email: "Wentao Li@163.com",
          authority: "PUBLIC",
        },
        {
          name: "CREST",
          desc: "The Coupled Routing and Excess STorage model (CREST) is a distributed hydrological model developed to simulate the spatial and temporal variation of land surface, and subsurface water fluxes and storages by cell-to-cell simulation.",
          developer: "Wentao Li",
          classification: ["Hydrology"],
          email: "Wentao Li@163.com",
          authority: "PUBLIC",
        },
      ],
      loading: false,
      uploadloading: false,
      importNewModels: [
        {
          name: "King's Math",
          developer: "Dajiang Wang",
        },
        {
          name: "King",
          developer: "Kai Wu",
        },
        {
          name: "King",
          developer: "Kai Wu",
        },
        {
          name: "King",
          developer: "Kai Wu",
        },
        {
          name: "King",
          developer: "Kai Wu",
        },
        {
          name: "King",
          developer: "Kai Wu",
        },
        {
          name: "King",
          developer: "Kai Wu",
        },
      ],
      importNewModelsShower: false,
      showUpdateShower: false,
      updateIP: false,
    };
  },
  methods: {
    importModels(modelServerInfo) {
      const _this = this;
      this.loading = true;
      axios.get(modelServerInfo.ip + "get-models-info").then((resp) => {
        if (resp.data.length == 0) {
          _this.$notify.error({
            title: "错误",
            message: "服务器不存在，请检查服务器地址！",
          });
        } else {
          _this.uploadModelsInfo2Server(resp.data);
        }
      });
    },
    updateLibrary(modelServerInfo) {
      const _this = this;
      const serverIP = modelServerInfo.ip;
      axios
        .post(config.httpIP + "updateModelLibraries", { ip: serverIP })
        .then((resp) => {
          if (resp.data == "success") {
            _this.uploadloading = false;
            _this.$notify({
              title: "",
              message: "服务器：" + serverIP + " 更新成功！",
              type: "success",
            });
            _this.init();
          }
        });
      this.uploadloading = true;
    },
    uploadModelsInfo2Server(modelData) {
      if (modelData == null) {
        this.$notify.error({
          title: "错误",
          message: "服务器不存在，请检查服务器IP！",
        });
      }
      const _this = this;
      var PostData = {
        ip: this.modelServerInfo.ip,
        developer: this.modelServerInfo.developer,
        email: this.modelServerInfo.email,
        models: modelData,
      };
      this.importNewModels = [];
      axios
        .post(config.httpIP + "importModels2Library", PostData)
        .then((resp) => {
          if (resp.data == "success") {
            _this.loading = false;
            for (let index = 0; index < modelData.length; index++) {
              const modelInfo = modelData[index].attribute_info;
              _this.importNewModels.push({
                name: modelInfo.name,
                developer: modelInfo.provider,
              });
              _this.models.push({
                name: modelInfo.name,
                classification: String(modelInfo.type).split(";"),
                desc: modelInfo.abstract,
                developer: modelInfo.provider,
                email: modelInfo.email,
                authority: modelInfo.copyright,
              });
            }
            _this.importNewModelsShower = true;
          } else {
            _this.$notify({
              title: "警告",
              message:
                "服务器：" +
                _this.modelServerInfo.ip +
                " 已存在，请更新服务器模型数据！",
              type: "warning",
            });
          }
        });
    },
    init() {
      const _this = this;
      this.models = [];
      axios.get(config.httpIP + "getModels").then((resp) => {
        var models = [];
        for (let index = 0; index < resp.data.length; index++) {
          const modelInfo = resp.data[index].attribute_info;
          models.push({
            name: modelInfo.name,
            classification: String(modelInfo.type).split(";"),
            desc: modelInfo.abstract,
            developer: modelInfo.provider,
            email: modelInfo.email,
            authority: modelInfo.copyright,
          });
        }
        _this.models = models;
      });
    },
    goScenes() {
      this.$router.push({
        path: "/modelingScenes",
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="less" scoped>
.redirect {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: #fff;
}
.background {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  position: absolute;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.head {
  box-sizing: border-box;
  width: 100%;
  height: 65px;
  background: black;
}
.container {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 65px);
  background-image: url("../assets/img/bacg.png");
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}
.title-container {
  width: 100%;
  height: 30%;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.search-container {
  width: 100%;
  height: 60px;
  // margin-top: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  // background-color: white;
}
.search-container .model_research {
  position: relative;
  font-size: 14px;
  display: inline-flex;
  width: 36%;
}
.model_research_input {
  -webkit-appearance: none;
  background-color: rgba(0, 0, 0, 0.6);
  background-image: none;
  border-radius: 4px 0px 0px 4px;
  border: 1px solid #ffffff;
  border-right: none;

  box-sizing: border-box;
  color: #ffffff;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}

.model_research_input::-webkit-input-placeholder {
  color: #c3c5ca;
}
.model-cards {
  display: flex;
  width: 100%;
  height: fit-content;
  flex-direction: row;
  justify-items: center;
  align-content: center;
  flex-wrap: wrap;
  justify-content: space-around;
  box-sizing: border-box;
  padding: 0px 20px;
  // background: #ffffff;
}
.model-cards .displayCard {
  width: 300px;
  height: 370px;
  margin: 10px;
  box-shadow: 0 3.2px 7.2px 0 rgb(0, 0, 0, 0.13);
  box-shadow: 0 2px 2px #888888;
  border: 1px solid #9a9a9a;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.import-models {
  position: absolute;
  width: 360px;
  height: fit-content;
  box-sizing: border-box;
  padding: 0px 20px 0px 10px;
  z-index: 9px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 3.2px 7.2px 0 rgb(0, 0, 0, 0.13);
  box-shadow: 0 2px 2px #888888;
  border: 2px solid #9a9a9a;
  background-color: rgba(0, 0, 0, 0.6);
}
.import-models h3 {
  color: white;
  text-align: center;
  margin: 10px 0px;
}
.demo-ruleForm /deep/ label {
  color: white;
}
.demo-ruleForm /deep/ .el-input__wrapper {
  background-color: rgba(0, 0, 0, 0);
  color: white;
}
.demo-ruleForm /deep/ .el-input__inner {
  color: white;
}
.demo-ruleForm /deep/ .el-textarea__inner {
  background-color: rgba(0, 0, 0, 0);
  color: white;
}
.demo-ruleForm /deep/ .el-input__count {
  background-color: rgba(0, 0, 0, 0);
  color: white;
}
.demo-ruleForm /deep/ .is-checked .el-radio__inner {
  background-color: #049f40;
  border-color: #049f40;
}
.demo-ruleForm /deep/ .is-checked .el-radio__label {
  color: #049f40;
}
.model-cards .displayCard .title {
  width: 100%;
  height: 136px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 45px;
  color: #ffffff;
  margin-top: 20px;
  padding: 0px 10px;
  box-sizing: border-box;
}
.displayCard .title p {
  color: rgb(255, 255, 255);
  font-size: 22px;
  margin: 10px 0px 0px 0px;
}
.displayCard .content {
  width: 100%;
  height: fit-content;
  padding: 0px 12px 5px 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  color: #ffffff;
}
.content h2 {
  position: relative;
  font-size: 16px;
  margin-top: 0px;
}
.content .border {
  width: 30px;
  height: 3px;
  background: #049f40;
  position: absolute;
  left: 0;
  bottom: -6px;
}
.content .about-txt {
  width: 100%;
  height: 80px;
  overflow: auto;
}

.content p {
  text-align: left;
  font-size: 14px;
  margin-top: 0px;
  margin-bottom: 0px;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* 限制显示3行文本 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.content .contact-info {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 6px;
}
.classification {
  display: flex;
  justify-items: flex-start;
  width: 100%;
  height: 25px;
  flex-wrap: wrap;
}
.s-m {
  /* text-align: center; */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-items: flex-start;
  /* flex-direction: column; */
}

.s-m a {
  text-decoration: none;
  font-size: 20px;
  color: #333;
  margin-right: 5px;
  transition: 0.4s;
}

.s-m p {
  font-size: 14px;
}

.s-m a:hover {
  color: #778beb;
}
.s-m .contactname {
  margin-left: 8px;
  font-size: 13px;
}
.import-list {
  width: 100%;
  color: white;
}
.import-list .title {
  font-size: 14px;
  margin: 5px;
}
.importModelList {
  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100px;
  margin-left: 5px;
  /* 在这个新层上设置滚动条样式 */
  overflow-y: auto; /* 或者 overflow: auto; 如果也需要水平滚动 */

  /* 滚动条样式 */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #e2e6e3 rgba(0, 0, 0, 0); /* Firefox */

  /* Webkit 内核浏览器样式 */
  &::-webkit-scrollbar {
    width: 10px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #e2e6e3;
    border-radius: 6px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color: #e2e6e3; /* 直接给出深色值，而非使用 darken 函数，因为CSS原生不支持此函数 */
  }
}

.importModelList .item {
  font-size: 12px;
  width: 100%;
  margin: 2px 0px;
  font-style: italic;
}
.update-libirary {
  position: absolute;
  width: 360px;
  height: fit-content;
  box-sizing: border-box;
  padding: 0px 20px 0px 10px;
  z-index: 9px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 3.2px 7.2px 0 rgb(0, 0, 0, 0.13);
  box-shadow: 0 2px 2px #888888;
  border: 2px solid #9a9a9a;
  background-color: rgba(0, 0, 0, 0.6);
}
.update-libirary h3 {
  color: white;
  text-align: center;
  margin: 10px 0px;
}
</style>